import React, { useEffect, useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import axios from 'axios'
let timer: NodeJS.Timer
const Index: React.FC = () => {
  const [searchParams] = useSearchParams()
  const out_trade_no = searchParams.get('out_trade_no')
  const trade_no = searchParams.get('trade_no')
  const [tradeStatus, setTradeStatus] = useState('')
  const [totalAmount, setTotalAmount] = useState(0)
  const getResult = async () => {
    const resp = await axios.get('/api/pay/result', {
      params: { out_trade_no, trade_no },
    })
    if (resp.data.data.code === '10000') {
      setTradeStatus(resp.data.data.tradeStatus)
      setTotalAmount(resp.data.data.totalAmount)
      clearInterval(timer)
    }
  }

  useEffect(() => {
    getResult()
    timer = setInterval(() => {
      getResult()
    }, 1000)
    return () => {
      clearInterval(timer)
    }
  }, [])

  return (
    <div>
      支付结果: {tradeStatus}---金额： {totalAmount}
    </div>
  )
}

export default Index
